<template>
  <a-cascader
      v-model="selectedValue"
      :options="data"
      placeholder="请选择科室"
      @change="handleChange"
  />
</template>

<script>
import axios from 'axios'

export default {
  mounted() {
    // load data for case of modify form display label, otherwise will display key
    this.fetch()
  },
  watch: {
    value(){
      this.selectedValue = this.value
    }
  },
  props: {
    value: { type: [Array], default: () => { return [] } },
  },
  data() {
    return {
      selectedValue: this.value,
      data: [],
    }
  },
  methods: {
    fetch () {
      axios({
        url: '/backend/doctor/getPendingDoctor',
        method: 'get',
        params: {"showDoctor":false},
      }).then((res) => {
        this.data = res.data.rows
      })
    },
    handleChange(val) {
      // Should provide an event to pass value to Form.
      let result = this.data.filter(item => {
        return item.id == val
      })
      let row = {}
      if (result.length > 0) {
        row = result[0]
      }
      this.$emit('change', val, row)
    },
    handleBlur(e) {
      this.$emit('blur', e)
    },
    focus() {
      this.$nextTick(function() {
        this.$refs.select.focus()
      })
    },
  }
}
</script>

<style scoped>

</style>